import React, { useState, useEffect } from 'react';
import { Card, Button, Typography, message, Space } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import { history } from 'umi';
import { getSolutionById } from '../../../services/solutionService';
import styles from './index.less';

const { Title, Paragraph } = Typography;

// URL检测和转换函数
const convertUrlsToLinks = (text: string) => {
  if (!text) return text;
  
  // URL正则表达式，匹配http(s)://开头的URL
  const urlRegex = /(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g;
  
  // 将文本分割成URL和非URL部分
  const parts = text.split(urlRegex);
  const matches = text.match(urlRegex) || [];
  
  // 组合结果
  return parts.map((part, i) => {
    // 如果匹配到URL，转换为链接
    if (matches.includes(part)) {
      return (
        <a key={i} href={part} target="_blank" rel="noopener noreferrer">
          {part}
        </a>
      );
    }
    // 非URL部分直接返回文本
    return part;
  }) as (string | JSX.Element)[];
};

const SolutionDetail: React.FC = () => {
  const [solution, setSolution] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchSolution = async () => {
      const id = history.location.pathname.split('/')[2];
      setLoading(true);
      try {
        const response = await getSolutionById(Number(id));
        if (response.code === 200) {
          setSolution(response.data);
        } else {
          message.error('获取解决方案详情失败');
        }
      } catch (error) {
        message.error('获取解决方案详情失败');
      } finally {
        setLoading(false);
      }
    };

    fetchSolution();
  }, []);

  if (!solution) {
    return null;
  }

  return (
    <div className={styles.container}>
      <Card
        title={<Title level={4}>{solution.solutionName}</Title>}
        extra={
          <Space>
            <Button onClick={() => history.push('/solutions')}>
              返回
            </Button>
            <Button 
              type="primary"
              icon={<EditOutlined />}
              onClick={() => history.push(`/solutions/${solution.id}/edit`)}
            >
              编辑
            </Button>
          </Space>
        }
      >
        <div className={styles.content}>
          <div className={styles.section}>
            <Title level={5}>用户群</Title>
            <Paragraph>{convertUrlsToLinks(solution.userGroup)}</Paragraph>
          </div>

          <div className={styles.section}>
            <Title level={5}>描述</Title>
            <Paragraph style={{ whiteSpace: 'pre-wrap' }}>
              {convertUrlsToLinks(solution.description)}
            </Paragraph>
          </div>

          <div className={styles.section}>
            <Title level={5}>详细内容</Title>
            <Paragraph style={{ whiteSpace: 'pre-wrap' }}>
              {convertUrlsToLinks(solution.content)}
            </Paragraph>
          </div>

          <div className={styles.section}>
              <Title level={5}>参考文档连接</Title>
              <Paragraph>{convertUrlsToLinks(solution.documentationUrl)}</Paragraph>
          </div>

        </div>
      </Card>
    </div>
  );
};

export default SolutionDetail; 